<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <link rel="stylesheet" href="./css/common.css" />

    <style>
      .item {
        height: 60px;
        border-bottom: 1px solid #ebebee;
      }

      .del { 
        height: 30px;
        width: 60px;
        background-color: #fd3037;
        color: #fff;
      }

      img {
        height: 50px;
      }
    </style>
  </head>

  <body>
    <header>
      <a href="./list.html">列表</a>
      <a href="./add.html">添加</a>
    </header>
    <ul id="list" class="mt-5 flex2">
      <!-- <li class="bg-fff item flex jc-sb pl-15 pr-15 aic f16 rel">
        <img
          src="https://game.gtimg.cn/images/yxzj/img201606/heroimg/171/171.jpg"
          alt=""
        />
        <div class="fg1 ml-5">
          <span class="f20">张飞</span>
          <p class="f999 f14 mt-5">29岁</p>
        </div>
        <a href="./detail.html">详情</a>
      </li>
      <li class="bg-fff item flex jc-sb pl-15 pr-15 aic f16 rel">
        <img
          src="https://game.gtimg.cn/images/yxzj/img201606/heroimg/171/171.jpg"
          alt=""
        />
        <div class="fg1 ml-5">
          <span class="f20">张飞</span>
          <p class="f999 f14 mt-5">29岁</p>
        </div>
        <a href="./detail.html">详情</a>
      </li> -->
    </ul>

    <script src="https://cdn.bootcdn.net/ajax/libs/zepto/1.2.0/zepto.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.24.0/axios.min.js"></script>

    <script>
      var baseUrl = "http://localhost:8888"; 
      var list; 
      axios.get(baseUrl + "/getList").then((res) => { 
        list = res.data;
        var str = "";
        list.forEach(function (item, index) {
          str += `<li class="bg-fff item flex jc-sb pl-15 pr-15 aic f16 rel">
            <div class="fg1 ml-5">
                <span class="f20">${item.nickname}</span>
                <p class="f999 f14 mt-5">${item.age}岁</p>
            </div>
            <a href="./detail.html?userId=${item.userId}">详情</a><button class="del" style="margin-left:10px">删除</button>
        </li>`;
        });
        $('ul').html(str); 
      });

      $("#list").on('click','.del',function () { 
        var index = $(this).parent().index(); 
        var user = list[index];
        var url = "http://localhost:8888/del";
        axios.get(url, { params: { userId: user.userId } }).then((res) => {
          list.splice(index,1);
        }).catch(function() {
            alert('删除失败')
        });
      });
    </script>
  </body>
</html>
